<template>
	<div class="screen_wrap echarts_box basics10">
		<corner></corner>
		<div class="body">
			<title1 title="餐饮油烟点位统计"></title1>
			<div class="statistics_wrap">
				<div class="section section1">
					<e-chart :options="option1" style="height:100%"></e-chart>
				</div>
				<div class="right">
					<div class="basics10_title">昨日设备运转情况</div>
					<div class="basics10_info">
						<div class="item">
							<div>在线率</div>
							<el-progress :percentage="progress.onlineRate" color="#15FEFE"></el-progress>
						</div>
						<div class="item">
							<div>达标率</div>
							<el-progress :percentage="progress.standardRate" color="#15FEFE"></el-progress>
						</div>
						<div class="item">
							<div>联动比</div>
							<el-progress :percentage="progress.linkageRatio" color="#15FEFE"></el-progress>
						</div>							
					</div>
				
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getAirCityNum,getLoamData} from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'
	export default {
		components: {
			corner,
			title1
		},
		data() {
			return {
				option1: null,
				option2: null,
				color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de','#00ffff', '#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed'],
				data:[],
				data2:[],
				xData:[],
				total:0,
				progress:{}
			}
		},
		mounted() {
			this.initData()		
		},
		methods: {
			initData(){
				getLoamData().then(res=>{
					this.progress=res.data.data
				})
				getAirCityNum(99).then(res=>{				
					let arr=res.data.data					
					for (var i = 0; i < arr.length; i++) {
						this.total+=arr[i].siteCount
					    this.data.push({
					        value: arr[i].siteCount,
					        name: arr[i].regionName,
					        itemStyle: {
					            normal: {
					                borderWidth: 1,
					                shadowBlur: 4,
					                borderColor:this.color[i],
					                shadowColor: this.color[i]
					            }
					        }
					    },
					    // 饼图间隔设置
					    {
					        value: 1,
					        name: '',
					        itemStyle: {
					            normal: {
					                label: {
					                    show: false
					                },
					                labelLine: {
					                    show: false
					                },
					                color: 'rgba(0, 0, 0, 0)',
					                borderColor: 'rgba(0, 0, 0, 0)',
					                borderWidth: 0
					            }
					        }
					    });
					}	
					// 饼图初始化
					this.init()
				})							
			},	                                                                                                                                                                                                                      
			init() {
				let that=this
				this.option1 = {
					color: this.color,					
				    title: {
				        text: '点位区域分布',
				        left: 'center',
				        top: 20,
				        textStyle: {
				            color: '#ccc',
				            fontSize:'12'
				        }
				    },				    
					tooltip: {
						show: true,
						formatter: function(params) {
							if(params.name){
								return params.marker+params.name+' '+params.value
							}
						}
					},		
					series: [{
						name: '',
						type: 'pie',
						clockWise: false,
						top: '15%',
						radius: [45, 35],
						hoverAnimation: false,
						itemStyle: {
							normal: {
								label: {
									show: true,
									// color: '#ddd',
									formatter: function(params) {
										var percent = 0;
										percent = ((params.value / that.total) * 100).toFixed(0);
										if(params.name !== '') {
											return params.name +' '+percent + '%';
										} else {
											return '';
										}
									},
								},
								labelLine: {
									length:15,
									length2: 10,
									show: true,
									color: '#00ffff'
								}
							}
						},
						data: this.data
					}]
				}
			}
		}
	}
</script>
<style>
	.basics10 .el-progress__text{color: #ccc;}
	.basics10 .el-progress-bar {width: 95%;}
	
	.basics10 .el-progress-bar__outer{background:#144174;border:1px solid #15FEFE; border-radius: 10px;}


	
</style>
<style lang="scss" scoped>
	.screen_wrap {
		height: 100%;
		position: relative;
		border: 1px solid #12B8E8;
		* {
			box-sizing: border-box;
		}
	}
	
	.body {
		height: 100%;
		display: flex;
		flex-direction: column;
		.statistics_wrap {
			flex: 1;
			display: flex;
		}
		.section {
			flex: 1;
		}
		.right{width: 48%;padding: 20px 5px 10px 10px;color: #ccc;font-size: 12px;display: flex;flex-direction: column;
		   .basics10_title{text-align: center;margin-bottom: 15px;}
		   .basics10_info{flex: 1;display: flex;flex-direction: column;
		     .item{flex: 1;}
		   }
		}
	}
</style>